<div class="content">
    <div id="example_title">
        <h1>Button Groups</h1>
        Button groups allow to do defined groups that could have common style and ability to show/hide, enable/disable, check/uncheck as a group.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar"></div>
<div style="height: 30px"></div>

<button class="w2ui-btn" id="act1">Hide group1</button>
<button class="w2ui-btn" id="act2">Show group1</button>
<span style="color: gray">|</span>
<button class="w2ui-btn" id="act3">Disable group2</button>
<button class="w2ui-btn" id="act4">Enable group2</button>
<div style="height: 20px"></div>

<!--CODE-->
<script type="module">
import { w2ui, w2toolbar, w2utils, query } from '__W2UI_PATH__'

let toolbar = new w2toolbar({
    box: '#toolbar',
    name: 'toolbar',
    tooltip: 'top',
    items: [
        { type: 'button', id: 'item1', text: 'Button', icon: 'w2ui-icon-colors' },
        { type: 'break', id: 'break1' },
        { type: 'group', id: 'group1', style: 'margin: -2px 3px; padding: 1px; border-radius: 4px; border: #9bb5ff; border-width: 1px 2px; border-style: solid;',
            items: [
                { type: 'button', id: 'item2', text: 'Button 1', icon: 'fa fa-star' },
                { type: 'button', id: 'item3', text: 'Button 2', icon: 'fa fa-star' },
                { type: 'menu-radio', id: 'item4', icon: 'fa fa-star',
                    text(item) {
                        let el = item.get(item.selected);
                        return 'Radio: ' + el.text;
                    },
                    overlay: { position: 'bottom|top' },
                    selected: 'id3',
                    items: [
                        { id: 'id1', text: 'Item 1', icon: 'fa fa-camera' },
                        { id: 'id2', text: 'Item 2', icon: 'fa fa-picture-o' },
                        { id: 'id3', text: 'Item 3', icon: 'fa fa-glass', count: 12 }
                    ]
                },
            ]
        },
        { type: 'break', id: 'break2' },
        { type: 'group', id: 'group2',
            items: [
                { type: 'radio', id: 'item5', group: '1', text: 'Radio 1', icon: 'w2ui-icon-info', checked: true },
                { type: 'radio', id: 'item6', group: '1', text: 'Radio 2', icon: 'w2ui-icon-paste' },
            ]
        },
        { type: 'spacer', id: 'spance1' },
        { type: 'button', id: 'item6', text: 'Button', icon: 'w2ui-icon-cross' }
    ],
    onClick(event) {
        let text = event.detail.item.text
        let sub = event.detail.subItem
        if (typeof text == 'function') text = text(event.detail.item)
        w2utils.notify(`Label "${text}${sub ? ':' + sub.text : ''}" clicked`)
    },
    onChange(event) {
        w2utils.notify(`Input "${event.detail.item.id}" changed to "${event.detail.value}"`)
    }
})

query('#act1').on('click', event => {
    toolbar.hide('break1', 'group1')
})

query('#act2').on('click', event => {
    toolbar.show('break1', 'group1')
})
query('#act3').on('click', event => {
    toolbar.disable('break2', 'group2')
})
query('#act4').on('click', event => {
    toolbar.enable('break2', 'group2')
})
query('#act5').on('click', event => {
    toolbar.set('name', { value: '' })
})
</script>
